<style lang="less" scoped>
  @import './index.less';
</style>
<template>
  <div class="tagsSelect">
    <a-tabs v-model="tabsKey" class="tabs">
      <a-tab-pane :key="1">
        <span slot="tab" class="tab-item">
          <v-icon type="todo" />
          <span>主题</span>
          <i>（必选）</i>
        </span>
      </a-tab-pane>
      <a-tab-pane :key="2">
        <span slot="tab" class="tab-item">
          <v-icon type="picture" />
          <span>类型</span>
        </span>
      </a-tab-pane>
    </a-tabs>
    <div v-if="tabsKey===1" class="label-list">
      <template v-for="(item,index) in dataSourse1">
        <span v-if="!selected.includes(item.name)" :key="item.id" @click="selectedFn(index,1)">{{ item.name }}</span>
      </template>
    </div>
    <div v-if="tabsKey===2" class="label-list">
      <template v-for="(item,index) in dataSourse2">
        <span v-if="!selected.includes(item.name)" :key="item.id" @click="selectedFn(index,2)">{{ item.name }}</span>
      </template>
    </div>
  </div>
</template>

<script>

import Icon from '~/components/icon'
export default {
  components: {
    'v-icon': Icon,
  },
  props: {
    dataSourse1: {
      type: Array,
      default: () => {
        return []
      }
    },
    dataSourse2: {
      type: Array,
      default: () => {
        return []
      }
    },
    selected: {
      type: Array,
      default: () => {
        return []
      }
    },
  },
  data () {
    return {
      tabsKey: 1
    }
  },
  created () {
    // console.log(this.$store.state)
  },
  methods: {
    selectedFn (index, type = 1) {
      const selectedItem = this[`dataSourse${type}`][index]
      this.$emit('select', selectedItem)
    }
  }
}
</script>
